<template>
	<view class="center">
		<view class="toptitle">
			<view class="topline" style="margin-right: 15rpx;"></view>
			<view class="font34" :style="'color:'+clearancecolor.font_1st_color+';'">通关奖励</view>
			<view class="topline" style="margin-left: 15rpx;"></view>
		</view>
		<text class="lucktip font28" :style="'color:'+clearancecolor.font_3rd_color">有机会获得万能卡</text>
		<view class="luckindex">
			<scroll-view :scroll-x="true" class="money"  style="margin: 0 auto;">
				<view class="flexaaa">
					<view class="miniItem" @click="getGift(item)" v-for="(item, index) in clearance" :key="index">
						<image :src="item.image" mode=""></image>
						<view class="" v-if="item.status !=2 " :style="'margin-bottom:15rpx;color:'+clearancecolor.font_1st_color+';'">通关{{item.question_times}}次</view>
						<view class="" v-if="item.status !=2 " :style="'color:'+clearancecolor.font_3rd_color+';'">已通关{{item.member_question_times}}次</view>
						<view class="" v-if="item.status ==2 " :style="'color:'+clearancecolor.font_3rd_color+';'">已领取</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="filesclearance" type="center">
			<view class="filesynpopup">
				<view class="filetop" :style="'background:'+clearancecolor.app_border_color+';'">
					<text class="font30" :style="'color:'+clearancecolor.font_1st_color+';'">提示</text>
				</view>
				<view class="filecenter" :style="'background:'+clearancecolor.app_theme_color+';'">
					<text class="tiptext font30" :style="'color:'+clearancecolor.font_1st_color+';'">抱歉，累计通关{{item.question_times}}次才能开启此奖励，快去闯关吧~</text>
					<view class="btn" @click="$refs.filesclearance.close()">
						<image class="bgimgpublic" :src="diyimage.btn_xs_warm" mode=""></image>
						<text class="font30" :style="'z-index:1;color:'+clearancecolor.font_1st_color+';'">确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="successScroll" type="center" :maskClick="false">
			<view class="exchagepopup" :style="'background:'+clearancecolor.app_theme_color+';'">
				<view class="exchagetop" :style="'background:'+clearancecolor.app_border_color+';'">
					<image @click="$refs.successScroll.close()" class="closepopup" :src="diyimage.btn_close" mode=""></image>
					<image class="imagetop" :src="diyimage.alert_success_image_2" mode=""></image>
					<text class="font36" :style="'margin-top:28rpx;z-index:1;color:'+clearancecolor.font_1st_color+';'">恭喜您</text>
				</view>
				<view class="centerimage">
					<image class="bgimgpublic" style="z-index: 0;" :src="diyimage.index_live_comment_bg_image_1" mode=""></image>
					<image class="exchangegoodsimage" :src="diyimage.question_progress_bar_end_icon" mode=""></image>
				</view>
				<text class="font30 text1" :style="'color:'+clearancecolor.font_1st_color+';'">恭喜您，您已累计通关{{item.member_question_times}}次，观
					看视频领取通关奖励~
				</text>
				<view class="btn" @click="openlookAdVideo">
					<image class="bgimgpublic" style="z-index: 0;" :src="diyimage.btn_sm_warm" mode=""></image>
					<image class="videoicon" :src="diyimage.btn_ad_unit" mode=""></image>
					<text class="font30" :style="'z-index:1;color:'+clearancecolor.font_1st_color+';'">去领取</text>
				</view>
			</view>
		</uni-popup>
		<ourloading :active="loadingFirst" text=" "  />
	</view>
</template>

<script>
	import ourloading from '@/components/our-loading/our-loading.vue'
	var util = require('@/js/util.js')
	export default {
		components:{
			ourloading,
		},
		props:{
			clearancecolor:{
				type:Object,
				default:{}
			},
			clearance:{
				type:Object,
				default:{}
			},
			topheight:{
				type:Number,
				default:0
			},
			diyimage:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				loadingFirst:false,
				item:'',
			}
		},
		watch:{
			clearance:{
				handler(newValue,oldValue){
					this.setcolorConfig()
				},
				immediate: true,
				deep:true
			}
		},
		methods: {
			getGift(item){
				this.item = item
				this.$emit("customsitem",item)
				if(item.question_times<=item.member_question_times){
					if(item.status !=2){
						this.$refs.successScroll.open()
					}
				}else{
					this.$refs.filesclearance.open()
				}
			},
			// getGiftenter(){
			// 	let _self = this
			// 	uni.request({
			// 		url: util.getUrl("question/section_reward"),
			// 		header: {
			// 			'content-type': 'application/x-www-form-urlencoded',
			// 			'Authori-zation':uni.getStorageSync("token")
			// 		},
			// 		data:{
			// 			section_id:_self.item.id
			// 		},
			// 		method: 'POST',
			// 		success: res => {
			// 			if(res.data.code == 1){
			// 				_self.$refs.successScroll.close()
			// 				uni.showToast({
			// 					title:res.data.msg,
			// 					icon: 'success'
			// 				})
			// 				_self.$emit("update",true)
			// 			}else{
			// 				_self.$refs.successScroll.close()
			// 				uni.showToast({
			// 					title:res.data.msg,
			// 					icon: 'success'
			// 				})
			// 			}
			// 		}
			// 	});
			// },
			openlookAdVideo(){
				// this.$refs.successScroll.close()
				this.$emit("openAdVideoStart",true)
			},
			setcolorConfig(){
				console.log("!!!",this.clearance)
			},
		}
	}
</script>

<style lang="scss">
	.filesynpopup{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 690rpx;
		border-radius: 20rpx;
		.iamgegroup{
			display: flex;
			align-items: center;
			margin-top: 52rpx;
			margin-bottom: 73rpx;
			.iamge1{
				width: 173rpx;
				height: 231rpx;
			}
			.iamge2{
				width: 135rpx;
				height: 63rpx;
			}
		}
		.filecenter{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			padding: 34rpx 0 36rpx 0;
			box-sizing: border-box;
			.iamgegroupbtn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 410rpx;
				height: 80rpx;
				position: relative;
				image{
					z-index: 0;
				}
			}
			.tiptext{
				width: 508rpx;
				margin-bottom: 41rpx;
				text-align: center;
				line-height: 60rpx;
			}
			.btn{
				width: 209rpx;
				height: 68rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				image{
					z-index: 0;
				}
			}
		}
		.filetop{
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			height: 80rpx;
			width: 100%;
			border-radius: 16rpx 16rpx 0px 0px;
			image{
				position: absolute;
				width: 31rpx;
				height: 31rpx;
				right: 24rpx;
			}
		}
	}
	.luckindex{
		width: 750rpx;
		.flexaaa{
			display: -webkit-box;
			padding: 0 30rpx;
			box-sizing: border-box;
			.miniItem{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 175rpx;
				box-sizing: border-box;
				
				margin-right: 22rpx;
				image{
					width: 100%;
					height: 249rpx;
					margin-bottom: 24rpx;
				}
			}
		}
	}
	.lucktip{
		margin-bottom: 47rpx;
	}
	.toptitle{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		margin-bottom: 21rpx;
		.topline{
			height: 5rpx;
			background-color: #FFFFFF;
			width: 80rpx;
		}
	}
	.center{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		box-sizing: border-box;
		padding: 50rpx 0 75rpx 0;
	}
</style>
